<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script src="/jquery.js"></script>
    <!-- SockJS的客户端脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js"></script>
    <script src="/js/websocket.js"></script>
    <script src="/js/form.js"></script>
    <script src="/js/lay.js"></script>
</head>
<style>
</style>
<body>

<div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>数据查询平台</legend>
    </fieldset>
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
                    <div class="layui-card">
                        <div class="layui-card-header">数据库
                            <button data-method="notice" class="layui-btn layui-btn-sm"
                                    style="float: right;margin-top: 8px">
                                添加数据库
                            </button>
                        </div>
                        <!--数据库-->
                        <div class="layui-card-body">
                            <div class="layui-input-inline layui-form" id="schema_refresh" th:fragment="schema_refresh">
                                <select lay-search lay-filter="get_tables">
                                    <!--<option value="" >请选择数据库</option>-->
                                    <div th:each="schemaResp:${schemaResps}">
                                        <option th:value="${schemaResp.schema}" value="S00202"><span
                                                th:text="${schemaResp.schema}">数据库</span></option>

                                    </div>
                                </select>
                            </div>

                            <!-- 表 面板-->
                            <div id="table_refresh" style="overflow:scroll;height: 1000px;background-color: white"
                                 th:fragment="table_refresh">
                                <div class="layui-collapse"
                                     th:each="table:${#lists.size(schemaResps) == 0} ? ${schemaResps} : ${schemaResps[0].tables}"
                                     style="border-color: rgba(255,255,255,.7)">
                                    <div class="layui-colla-item">
                                        <!--<h2 class="layui-colla-title" style="background-color: white;padding-left: 0px">-->
                                        <i class="layui-icon layui-icon-table layui-colla-title"
                                           style="font-size: 20px; color: #009688;background-color: white;padding-left: 0px"><span
                                                th:text="${table.key}"></span></i>
                                        <!--</h2>-->
                                        <div class="layui-colla-content">
                                            <div th:each="column:${table.value}">
                                                <span th:text="${column}"></span><br>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
            <div class="layui-col-md9">
                <div class="layui-card">
                    <div class="layui-card-header">查询</div>
                    <div class="layui-card-body">
                        <div id="conversationDiv">
                            <pre id="code" class="ace_editor" style="height:300px;margin-top: 10px"
                                 placeholder="请输入sql语句"></pre>
                        </div>
                        <hr>
                        <button style="margin-right: 10px" id="sendSql" onclick="sendSql();" class="layui-btn">分析
                        </button>
                        <button style="margin-right: 10px" id="send" onclick="executeSql()" class="layui-btn">查询
                        </button>
                        <button style="margin-right: 10px" id="parser" onclick="columnParser()" class="layui-btn">解析
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-col-md9" style="float: right">
                <div class="layui-card">
                    <!--<div class="layui-card-header"></div>-->
                    <div class="layui-card-body">
                        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <ul class="layui-tab-title">
                                <li class="layui-this" lay-id="verfiyResult">分析结果</li>
                                <li lay-id="queryResult">查询结果</li>
                                <li lay-id="columnParser">解析结果</li>
                            </ul>
                            <!--background-color: #040404;-->
                            <div class="layui-tab-content" style="width: 100%;height: 400px;overflow:scroll">
                                <div class="layui-tab-item layui-show"
                                     style="color: white;background-color: #040404;overflow:scroll;height: 400px;padding-left: 5px"
                                     id="response">

                                </div>
                                <div class="layui-tab-item" style="overflow:scroll">
                                    <table id="queryResult" lay-filter="test"></table>
                                </div>
                                <div class="layui-tab-item" style="overflow:scroll">
                                    <table id="columnParser" lay-filter="test1"></table>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>
<div id="form"
     style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 400;"
     hidden>
    <form id="sub" class="layui-form" action="/schema" lay-filter="example" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">地址：</label>
            <div class="layui-input-block">
                <input type="text" name="address" lay-verify="title" autocomplete="off" placeholder="请输入数据库地址"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入用户名"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>
            <div class="layui-input-block">
                <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数据库：</label>
            <div class="layui-input-inline">
                <input name="schema" required lay-verify="required" placeholder="数据库" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">端口：</label>
            <div class="layui-input-inline">
                <input name="port" required lay-verify="required" placeholder="3306" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</div>
</body>
</html>
<script>

    //初始化对象
    editor = ace.edit("code");

    //设置风格和语言（更多风格和语言，请到github上相应目录查看）
    //    theme = "tomorrow"
    theme = "xcode";
    language = "mysql";
    editor.setTheme("ace/theme/" + theme);
    editor.session.setMode("ace/mode/" + language);

    //字体大小
    editor.setFontSize(14);

    //设置只读（true时只读，用于展示代码）
    editor.setReadOnly(false);

    //自动换行,设置为off关闭
    editor.setOption("wrap", "free")

    //启用提示菜单
    ace.require("ace/ext/language_tools");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });

    function sendSql() {
        var sql = editor.getValue();
        ws.send(sql);
        console.log(ws);
    }

    function executeSql() {
        var sql = editor.getValue();
        //获取数据库
        var schema = $('.layui-form-select .layui-this').last().html();
        if (schema === '' || schema === undefined || schema === null) {
            alert("请选择数据库");
            return;
        }
        if (sql === '') {
            alert("请输入sql");
            return;
        }
        ws.send(schema + ":::" + sql);
    }

    function columnParser() {
        var sql = editor.getValue();
        if (sql === '') {
            alert("请输入sql");
            return;
        }
        ws.send("===" + sql);
    }

</script>